<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Eliden - 神秘世界</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-top: 20px;
        }
        p {
            text-align: center;
            color: #666;
            margin-bottom: 20px;
        }
        .image-container {
            text-align: center;
            margin: 20px 0;
        }
        .image-container img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .button-container {
            text-align: center;
            margin-bottom: 40px;
        }
        .button-container button {
            background-color: #007BFF;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            margin: 0 10px;
            transition: background-color 0.3s;
            border: none;
            cursor: pointer;
        }
        .button-container button:hover {
            background-color: #0056b3;
        }
        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            border-radius: 8px;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .reviews {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .review {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .review .user-info {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .review .user-info img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .review .user-info h4 {
            margin: 0;
        }
        .review .rating {
            color: #FFD700;
            margin-bottom: 10px;
        }
        .review .content {
            color: #666;
        }
        .review .date {
            color: #999;
            font-size: 12px;
            margin-top: 10px;
        }
        .review-form {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 40px;
        }
        .review-form input,
        .review-form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .review-form button {
            background-color: #007BFF;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            border: none;
            cursor: pointer;
        }
        .review-form button:hover {
            background-color: #0056b3;
        }
    </style>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 统一管理游戏ID
        const GAME_ID = 15;

        function addToCart() {
            const userId = 1; // 实际应从会话获取
            const quantity = 1;

            $.ajax({
                url: '/shoppingcart/add',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    userId: userId,
                    gameId: GAME_ID,
                    quantity: quantity
                }),
                success: function(response) {
                    alert('加入购物车成功');
                },
                error: function(error) {
                    alert('加入购物车失败');
                }
            });
        }

        function submitOrder() {
            const userId = 1; // 实际应从会话获取
            const quantity = 1;
            const price = 99.00; // 游戏价格

            $.ajax({
                url: '/order/create',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    userId: userId,
                    gameId: GAME_ID,
                    quantity: quantity,
                    totalPrice: price
                }),
                success: function(response) {
                    alert('订单提交成功！');
                    closeModal();
                },
                error: function(error) {
                    alert('订单提交失败，请重试。');
                }
            });
        }

        function showModal() {
            document.getElementById('orderModal').style.display = 'block';
        }

        function closeModal() {
            document.getElementById('orderModal').style.display = 'none';
        }

        function cancelOrder() {
            closeModal();
        }

        function reviewadd() {
            const username = $('#username').val();
            const rating = $('#rating').val();
            const content = $('#content').val();

            if (!username || !rating || !content) {
                alert('请填写完整的评论信息');
                return;
            }

            // 获取当前登录用户的 ID
            $.ajax({
                url: '/api/user/id',
                type: 'GET',
                success: function(userId) {
                    if (userId === -1) {
                        alert('请先登录再发表评论');
                        return;
                    }

                    $.ajax({
                        url: '/review/add',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({
                            gameId: GAME_ID,
                            username: username,
                            rating: parseInt(rating),
                            content: content,
                            userId: userId // 添加用户 ID
                        }),
                        success: function(response) {
                            if (response.success) {
                                alert('评论提交成功！');
                                // 清空表单
                                $('#username').val('');
                                $('#rating').val('');
                                $('#content').val('');
                                // 刷新评论
                                loadReviews();
                            } else {
                                alert('评论提交失败: ' + response.message);
                            }
                        },
                        error: function(error) {
                            alert('评论提交失败，请重试: ' + error.statusText);
                        }
                    });
                },
                error: function(error) {
                    alert('获取用户 ID 失败，请重试: ' + error.statusText);
                }
            });
        }

        function generateRatingStars(rating) {
            let stars = '';
            for (let i = 0; i < 5; i++) {
                if (i < rating) {
                    stars += '<i class="fa fa-star"></i>';
                } else {
                    stars += '<i class="fa fa-star-o"></i>';
                }
            }
            return stars;
        }

        // 加载评论
        function loadReviews() {
            $.ajax({
                url: `/queryByGameId/${GAME_ID}`,
                type: 'GET',
                success: function(reviews) {
                    renderReviews(reviews);
                },
                error: function(error) {
                    console.error('获取评论失败:', error);
                    // 保留静态评论作为备选
                }
            });
        }

        function renderReviews(reviews) {
            const reviewsContainer = $('.reviews');
            reviewsContainer.empty(); // 清空现有评论

            if (reviews && reviews.length > 0) {
                reviewsContainer.append('<h2>用户评价</h2>');

                reviews.forEach(review => {
                    const reviewHtml = `
                        <div class="review">
                            <div class="user-info">
                                <img src="https://picsum.photos/seed/${review.username}/100/100" alt="${review.username}的头像">
                                <h4>${review.username}</h4>
                            </div>
                            <div class="rating">
                                ${generateRatingStars(review.rating)}
                            </div>
                            <p class="content">${review.content}</p>
                            <p class="date">评价于 ${formatDate(review.createTime)}</p>
                        </div>
                    `;
                    reviewsContainer.append(reviewHtml);
                });
            } else {
                reviewsContainer.append(`
                    <div class="review text-center text-gray-500">
                        暂无评论，快来发表你的看法吧！
                    </div>
                `);
            }
        }

        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString();
        }

        // 页面加载后执行
        $(document).ready(function() {
            loadReviews();
        });
    </script>
</head>
<body>
<h1>Eliden - 神秘世界</h1>
<p>踏入充满奇幻与冒险的神秘世界</p>
<div class="image-container">
    <!-- 替换为实际的Eliden游戏图片链接 -->
    <img src="eilden.jpg" alt="Eliden - 神秘世界">
</div>
<div class="button-container">
    <button onclick="showModal()">立即购买</button>
    <button onclick="addToCart()">加入购物车</button>
</div>

<!-- 订单信息模态框 -->
<div id="orderModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h2>订单信息</h2>
        <p>游戏名称: Eliden - 神秘世界</p>
        <p>价格: 99元</p>
        <div class="button-container">
            <button onclick="submitOrder()">确认购买</button>
            <button onclick="cancelOrder()">取消</button>
        </div>
    </div>
</div>

<!-- 用户评价 -->
<div class="reviews">
    <!-- 评论将通过JavaScript动态加载 -->
</div>

<!-- 评论表单 -->
<div class="review-form">
    <h2>发表评论</h2>
    <input type="text" id="username" placeholder="你的昵称" required>
    <input type="number" id="rating" min="1" max="5" placeholder="评分 (1-5)" required>
    <textarea id="content" placeholder="你的评论内容" required></textarea>
    <button onclick="reviewadd()">提交评论</button>
</div>

<!-- 引入Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</body>
</html>